/*
 * @Author: viivLgr 
 * @Date: 2018-05-25 10:23:17 
 * @Last Modified by: viivLgr
 * @Last Modified time: 2018-05-31 18:54:48
 */
import React from 'react';
import { Link, NavLink } from 'react-router-dom';

class NavSide extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            sideMenuList: [
                {
                    link: '/',
                    icon: 'dashboard',
                    name: '首页'
                },
                {
                    link: '/product',
                    icon: 'list',
                    name: '商品',
                    list: [
                        {
                            link: '/product',
                            name: '商品管理'
                        },
                        {
                            link: '/product-category',
                            name: '商品管理'
                        }
                    ]
                },
                {
                    link: '/order',
                    icon: 'check-square-o',
                    name: '订单',
                    list: [
                        {
                            link: '/order',
                            name: '订单管理'
                        },
                    ]
                },
                {
                    link: '/user',
                    icon: 'user-o',
                    name: '用户',
                    list: [
                        {
                            link: '/user',
                            name: '用户管理'
                        }
                    ]
                }
            ]
        }
    }
    render() {
        return (
            <div className="navbar-default navbar-side">
                <div className="sidebar-collapse">
                    <ul className="nav">
                        {
                            this.state.sideMenuList.map((lv1, id1) => {
                                if (lv1.list) {
                                    return (
                                        <li className="active" key={id1}>
                                            <Link to={lv1.link}>
                                                <i className={`fa fa-${lv1.icon}`}></i>
                                                <span>{lv1.name}</span>
                                                <span className="fa arrow"></span>
                                            </Link>
                                            <ul className="nav nav-second-level collapse in">
                                                {
                                                    lv1.list.map((lv2, id2) => {
                                                        return (
                                                            <li key={id2}>
                                                                <NavLink to={lv2.link} activeClassName="active-menu">{lv2.name}</NavLink>
                                                            </li>
                                                        )
                                                    })
                                                }
                                            </ul>
                                        </li>
                                    );
                                } else {
                                    return (
                                        <li key={id1}>
                                            <NavLink exact activeClassName="active-menu" to={lv1.link}>
                                                <i className={`fa fa-${lv1.icon}`}></i>
                                                <span>{lv1.name}</span>
                                            </NavLink>
                                        </li>
                                    );
                                }
                            })
                        }
                    </ul>
                </div>

            </div>
        );
    }
}

export default NavSide;